import 'package:flutter/material.dart';
import 'package:wallpaper_app/components/input/normal_input.dart';

class FilterItems extends StatelessWidget {
  final String order;
  final String ratioSelected;
  final String categories;
  final String purity;
  final ValueChanged<String> changeOrder;
  final ValueChanged<String?> changeRatioSelected;
  final ValueChanged<String> changeCategories;
  final ValueChanged<String> changePurity;
  final Function conditionalQuery;
  final TextEditingController ratioController;
  const FilterItems({
    super.key,
    required this.order,
    required this.ratioSelected,
    required this.categories,
    required this.purity,
    required this.changeOrder,
    required this.changeRatioSelected,
    required this.changeCategories,
    required this.changePurity,
    required this.conditionalQuery,
    required this.ratioController,
  });

  @override
  Widget build(BuildContext context) {
    List orderOptions = [
      ['desc', '降序'],
      ['asc', '升序'],
    ];

    List ratioOptions = [
      ['', '全部比例'],
      ['16x9', '16:9'],
      ['16x10', '16:10'],
      ['21x9', '21:9'],
      ['customize', '自定义'],
    ];

    List categoriesOptions = [
      ['100', '常规'],
      ['101', '动漫'],
      ['111', '人物'],
    ];

    List purityOptions = [
      ['100', '安全'],
      ['110', '模糊'],
      ['111', '成人'],
    ];
    final theme = Theme.of(context).colorScheme;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: theme.primaryContainer.withOpacity(0.8),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Column(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            spacing: 8,
            children: [
              itemItem(order, '排序方式', orderOptions, changeOrder),
              Row(
                spacing: 20,
                children: [
                  itemTitle(title: '自定义比例(16x9)'),
                  SizedBox(
                    width: 200,
                    child: NormalInput(
                      controller: ratioController,
                      height: 35,
                      radius: 5,
                      suffixIcon: Icon(Icons.insert_emoticon_outlined),
                    ),
                  ),
                ],
              ),
              itemItem(
                  ratioSelected, '图片比例', ratioOptions, changeRatioSelected),
              itemItem(categories, '分类', categoriesOptions, changeCategories),
              itemItem(purity, '限制', purityOptions, changePurity),
              InkWell(
                onTap: () {
                  conditionalQuery();
                },
                child: Material(
                  color: Theme.of(context)
                      .colorScheme
                      .primaryContainer
                      .withOpacity(0.8),
                  borderRadius: BorderRadius.circular(5),
                  child: InkWell(
                    onTap: () {
                      conditionalQuery();
                    },
                    borderRadius: BorderRadius.circular(5),
                    child: Container(
                      width: double.infinity,
                      padding: EdgeInsets.all(8),
                      child: Center(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.search),
                            SizedBox(width: 8),
                            Text('搜索'),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget itemItem(
      String groupValue, String title, List options, Function onChanged) {
    return Row(
      spacing: 10,
      children: [
        itemTitle(title: title),
        for (var item in options)
          Row(
            children: [
              Radio<String>(
                value: item[0],
                groupValue: groupValue,
                onChanged: (v) {
                  if (v != null) onChanged(v);
                },
              ),
              Text(item[1]),
              const SizedBox(width: 8),
            ],
          ),
      ],
    );
  }

  Widget radioItem({
    required String value,
    required String label,
    required String groupValue,
    required ValueChanged<String> onChanged,
  }) {
    return Row(
      children: [
        Radio<String>(
          value: value,
          groupValue: groupValue,
          onChanged: (value) {
            if (value != null) onChanged(value);
          },
        ),
        Text(label),
      ],
    );
  }

  Widget itemTitle({required String title}) {
    return Text(
      '$title:',
      style: TextStyle(fontWeight: FontWeight.bold),
    );
  }
}
